<style type="text/css">
    #hr-outsideTeacher-detail {
        pdetailing: 20px 25px 25px 0;
    }
</style>

<!-- 注意id属性每个页面id必须独立-->
<div class="layui-fluid" id="hr-outsideTeacher-detail">
    <!-- 注意lay-filter属性，该属性为form表单唯一属性-->
    <form class="layui-form" action="" lay-filter="hr-outsideTeacher-detail-form">
        <div class="layui-form-item febs-hide">
            <label class="layui-form-label febs-form-item-require">ID：</label>
            <div class="layui-input-block">
                <input type="text" name="id" autocomplete="off" class="layui-input"
                       data-th-value="${outsideTeacher.id}" disabled style="background:#CCCCCC">
            </div>
        </div>
        <!--layui-form-item为自适应长度样式-->
        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item">真实姓名</label>
            <!-- layui-input-block为整行宽度样式 -->
            <div class="layui-input-block">
                <!-- minlength为最小长度、 maxlength为最大长度-->
                <!-- autocomplete默认填写off,此项为配置使用缓存读取历史记录-->
                <!-- lay-verify为表单验证属性：required：必填项、range于minlength，maxlength公用， character不能输入特殊字符-->
                <!-- 详细表单验证请参考：resources\static\febs\lay\modules\validate.js-->
                <input type="text" name="realName" minlength="2" maxlength="20" data-th-value="${outsideTeacher.realName}"
                       disabled lay-verify="range|name|chinese" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <!-- 表单页左侧label -->
            <label class="layui-form-label febs-form-item">性别</label>
            <!-- layui-input-block为整行宽度样式 -->
            <div class="layui-input-block">
                <input type="text" name="detail" minlength="2" maxlength="20" lay-verify="chinese" disabled
                           autocomplete="off" class="layui-input repetitive" id="hr-outsideTeacher-detail-sex">
            </div>
        </div>
        <div class="layui-form-item">
            <!-- 表单页左侧label -->
            <label class="layui-form-label febs-form-item">常用手机</label>
            <!-- layui-input-block为整行宽度样式 -->
            <div class="layui-input-block">
                <input type="text" name="phone" minlength="2" maxlength="20" lay-verify="phone" disabled
                       autocomplete="off" class="layui-input repetitive" id="hr-outsideTeacher-detail-phone">
            </div>
        </div>

        <div class="layui-form-item">
            <!-- 表单页左侧label -->
            <label class="layui-form-label febs-form-item">备用手机</label>
            <!-- layui-input-block为整行宽度样式 -->
            <div class="layui-input-block">
                <!-- minlength为最小长度、 maxlength为最大长度-->
                <!-- autocomplete默认填写off,此项为配置使用缓存读取历史记录-->
                <!-- lay-verify为表单验证属性：required：必填项、range于minlength，maxlength公用， character不能输入特殊字符-->
                <!-- 详细表单验证请参考：resources\static\febs\lay\modules\validate.js-->
                <input type="text" name="backPhone" minlength="2" maxlength="20" lay-verify="phone"  disabled
                       autocomplete="off" class="layui-input repetitive" id="hr-outsideTeacher-detail-backPhone">
            </div>
        </div>

        <div class="layui-form-item">
            <!-- 表单页左侧label -->
            <label class="layui-form-label febs-form-item">邮箱</label>
            <!-- layui-input-block为整行宽度样式 -->
            <div class="layui-input-block">
                <!-- minlength为最小长度、 maxlength为最大长度-->
                <!-- autocomplete默认填写off,此项为配置使用缓存读取历史记录-->
                <!-- lay-verify为表单验证属性：required：必填项、range于minlength，maxlength公用， character不能输入特殊字符-->
                <!-- 详细表单验证请参考：resources\static\febs\lay\modules\validate.js-->
                <input type="text" name="mail" minlength="2" maxlength="20" lay-verify="char|required|range|name|character|chinese"
                       disabled autocomplete="off" class="layui-input repetitive" id="hr-outsideTeacher-detail-mail">
            </div>
        </div>

        <div class="layui-form-item">
            <!-- 表单页左侧label -->
            <label class="layui-form-label febs-form-item">微信号</label>
            <!-- layui-input-block为整行宽度样式 -->
            <div class="layui-input-block">
                <input type="text" name="wxid" minlength="2" maxlength="20" lay-verify="char|required|range|name|character|chinese"
                       disabled autocomplete="off" class="layui-input repetitive" id="hr-outsideTeacher-detail-wxid">
            </div>
        </div>

        <div class="layui-form-item">
            <!-- 表单页左侧label -->
            <label class="layui-form-label febs-form-item">银行账户名</label>
            <!-- layui-input-block为整行宽度样式 -->
            <div class="layui-input-block">
                <input type="text" name="bankRealName" minlength="2" maxlength="20" lay-verify="" disabled
                       autocomplete="off" class="layui-input repetitive" id="hr-outsideTeacher-detail-bankRealName">
            </div>
        </div>

        <div class="layui-form-item">
            <!-- 表单页左侧label -->
            <label class="layui-form-label febs-form-item">开户行</label>
            <!-- layui-input-block为整行宽度样式 -->
            <div class="layui-input-block">
                <input type="text" name="bankName" minlength="2" maxlength="20" lay-verify="" disabled
                       autocomplete="off" class="layui-input repetitive" id="hr-outsideTeacher-detail-bankName">
            </div>
        </div>

        <div class="layui-form-item">
            <!-- 表单页左侧label -->
            <label class="layui-form-label febs-form-item">开户地址</label>
            <!-- layui-input-block为整行宽度样式 -->
            <div class="layui-input-block">
                <input type="text" name="bankAdd" minlength="2" maxlength="20" lay-verify="" disabled
                       autocomplete="off" class="layui-input repetitive" id="hr-outsideTeacher-detail-bankAdd">
            </div>
        </div>

        <div class="layui-form-item">
            <!-- 表单页左侧label -->
            <label class="layui-form-label febs-form-item">银行卡卡号</label>
            <!-- layui-input-block为整行宽度样式 -->
            <div class="layui-input-block">
                <input type="text" name="bankCardId" minlength="2" maxlength="20" lay-verify="" disabled
                       autocomplete="off" class="layui-input repetitive" id="hr-outsideTeacher-detail-bankCardId">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label ">银行卡图片</label>
            <div id="outsideTeacherBankPic">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="position:relative;top:12px">备注</label>
            <div class="layui-input-block">
                <textarea name="remark" maxlength="200" class="layui-textarea" disabled style="position:relative;top:12px"></textarea>
            </div>
        </div>
        <div class="layui-form-item febs-hide">
            <button class="layui-btn" lay-submit="" lay-filter="outsideTeacher-detail-form-submit"</button>
        </div>

    </form>
</div>

<script data-th-inline="javascript">
    layui.use(['febs', 'form', 'validate','upload'], function () {
        let $ = layui.$,
            febs = layui.febs,
            layer = layui.layer,
            upload = layui.upload,
            form = layui.form,
            // 获得后台出入的实体对象
            outsideTeacher = [[${outsideTeacher}]],
            // 验证
            validate = layui.validate;
        // 表单验证
        form.verify(validate);
        // 表单渲染
        form.render();

        // 初始化页面数据
        initoutsideTeacherValue();
        // 初始化页面数据
        function initoutsideTeacherValue() {
            form.val("hr-outsideTeacher-detail-form", {
                "realName": outsideTeacher.realName,
                "detail": outsideTeacher.detail,
                "phone": outsideTeacher.phone,
                "backPhone": outsideTeacher.backPhone,
                "mail": outsideTeacher.mail,
                "wxid": outsideTeacher.wxid,
                "bankRealName": outsideTeacher.bankRealName,
                "bankName": outsideTeacher.bankName,
                "bankAdd": outsideTeacher.bankAdd,
                "bankCardId": outsideTeacher.bankCardId,
                "bankPic": outsideTeacher.bankPic,
                "remark": outsideTeacher.remark
            });
            $("#outsideTeacherBankPic").html("<img src='"+outsideTeacher.bankPic+"' width='200px' style='ping-left: 110px;position:relative;top:12px;'>")
        }
    });
</script>